<template>
    <div class="m1">
      <div class="m2 refresh_box">
        <div class="m3">
          <div class="m4"></div>
          商城后台管理系统
        </div>
        <el-form :model="formData" ref="loginFormRef" :rules="rules" label-width="80px" class="login_form" >
          <el-form-item label="账号" prop="name">
            <el-input v-model="formData.name" :prefix-icon="UserFilled" />
          </el-form-item>
          <el-form-item label="密码" prop="pas">
            <el-input v-model="formData.pas" :prefix-icon="Lock" show-password/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submit(loginFormRef)">登录</el-button>
            <el-button @click="loginFormRef.resetFields()">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </template>
  
  <script setup>
    import { ElForm, ElFormItem, ElInput, ElButton, ElIcon, ElMessage } from "element-plus"
    import { UserFilled, Lock, View, Hide } from "@element-plus/icons-vue"
    import { reactive, ref } from "vue"
    import { useRouter } from "vue-router"
    import { denglu,caidanlb } from "@/tools/ajax"
    import { useStore } from "vuex"
  
    const router = useRouter()
    const store = useStore()  
    const formData = reactive({ name: "", pas: "" })
    const loginFormRef = reactive({}) // 
    const rules = { 
      name: [
        {
          required: true,          
          message: '请输入账号',         
          trigger: 'blur'           
        }, {
          min: 2,     
          max: 10,     
          message: '账号长度在2-10之间',
          trigger: 'blur'
        }
      ],
      pas: [
        {
          required: true,           
          message: '请输入密码',      
          trigger: 'blur'           
        }, {
          min: 4,   
          max: 12,  
          message: '密码长度在4-12之间',
          trigger: 'blur'
        }
      ]
    }
    function submit(form) {
      form.validate(async bool=>{
        console.log(bool, formData);
        if(!bool) return;
        var res = await denglu({
          username: formData.name,
          password: formData.pas
        })
        console.log(res);
        if(res.meta.status == 200){
          store.commit("setToken", res.data.token)
          store.commit("setName", res.data.username)
          ElMessage.success(res.meta.msg)
          setTimeout(() => {
            router.push("/home")
          }, 1000);
          caidanlb().then(res2 => {
          store.commit("setMenus", res2.data)
          console.log(res2.data);
          router.init()
        })
        }else{
          ElMessage.error(res.meta.msg)
        }
      })
    }
  
  </script>
  
  <style scoped lang="scss">
    .m1 {
      height: 100vh;
      background-image: radial-gradient(transparent, rgba(14, 71, 75, 0.7)), linear-gradient(rgb(255, 255, 255), rgb(82, 52, 52));
      display: flex;
      align-items: center;
      justify-content: center;
    }
  
    .m2 {
      width: 380px;
      height: 260px;
      background-color: white;
      border-radius: 10px;
      box-shadow: 0 0 20px gray;
      overflow: hidden;
    }
  
    .m4 {
      display: inline-block;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      vertical-align: middle;
      background-image: url("../assets/logo.png");
      background-size: 150% 80%;
      background-repeat: no-repeat;
      background-position: 40% 40%;
      filter: drop-shadow(0 0 3px #aaa);
    }
    .m3 {
      font-size: 23px;
      color: #035CAD;
      line-height: 100px;
      text-shadow: 0 0 3px #aaa;
    }
  
    .login_form {
      width: 320px;
    }
  </style>